import 'package:flutter/material.dart';
import 'package:node_chat/CustomUI/AvtarCard.dart';
import 'package:node_chat/CustomUI/ButtonCard.dart';
import 'package:node_chat/CustomUI/ContactCard.dart';
import 'package:node_chat/Model/ChatModel.dart';

class CreateGroup extends StatefulWidget {
  const CreateGroup({
    super.key,
  });

  @override
  State<CreateGroup> createState() => _SelectContactState();
}

class _SelectContactState extends State<CreateGroup> {
  List<ChatModel> contacts = [
    ChatModel(
        name: "dev stack1",
        icon: "icon",
        status: "a full devloper1",
        isGroup: false,
        time: "time",
        select: false,
        currentMessage: "currentMessage",
        id: 1),
    ChatModel(
        name: "dev stack2",
        icon: "icon",
        status: "a full devloper2",
        isGroup: false,
        time: "time",
        select: false,
        currentMessage: "currentMessage",
        id: 2),
    ChatModel(
        name: "dev stack3",
        icon: "icon",
        status: "a full devloper3",
        isGroup: false,
        time: "time",
        select: false,
        currentMessage: "currentMessage",
        id: 3),
    ChatModel(
        name: "dev stack4",
        icon: "icon",
        status: "a full devloper4",
        isGroup: false,
        time: "time",
        select: false,
        currentMessage: "currentMessage",
        id: 4),
  ];

  List<ChatModel> groups = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "new group",
              style: TextStyle(fontSize: 19, fontWeight: FontWeight.bold),
            ),
            Text(
              "add participants",
              style: TextStyle(fontSize: 13),
            )
          ],
        ),
        actions: [
          IconButton(
            icon: const Icon(
              Icons.search,
              size: 26,
            ),
            onPressed: () {},
          ),
        ],
      ),
      body: Stack(
        children: [
          ListView.builder(
              itemCount: contacts.length + 1,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Container(
                    height: groups.isNotEmpty ? 90 : 10,
                  );
                }

                return InkWell(
                  onTap: () {
                    setState(() {
                      if (contacts[index - 1].select == true) {
                        groups.remove(contacts[index - 1]);
                        contacts[index - 1].select = false;
                      } else {
                        groups.add(contacts[index - 1]);
                        contacts[index - 1].select = true;
                      }
                    });
                  },
                  child: ContactCard(
                    contact: contacts[index - 1],
                  ),
                );
              }),
          groups.isNotEmpty
              ? Column(
                  children: [
                    Container(
                      height: 75,
                      color: Colors.white,
                      child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: contacts.length,
                          itemBuilder: (context, index) {
                            if (contacts[index].select == true) {
                              return InkWell(
                                onTap: () {
                                  setState(() {
                                    contacts[index].select = false;
                                    groups.remove(contacts[index]);
                                  });
                                },
                                child: AvtarCard(
                                  contact: contacts[index],
                                ),
                              );
                            } else {
                              return const SizedBox();
                            }
                          }),
                    ),
                    const Divider(
                      thickness: 1,
                    )
                  ],
                )
              : const SizedBox()
        ],
      ),
    );
  }
}


// const ButtonCard(
//             icon: Icons.group,
//             name: "new group",
//           ),
//           const ButtonCard(
//             icon: Icons.person_add,
//             name: "new contact",
//           ),